<template>
  <div class="eMail-wrap">
    <div v-if="showFlag">
      <el-form label-width="55px">
        <el-form-item label="邮箱：">
          <el-input v-model="emailParams.email" placeholder="请输入您的邮箱"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="_bindEmail">提交</el-button>
    </div>
    <div v-else class="success-box">
      <img class="successImg" src="@/assets/icon-success.png" alt />
      <h1 class="successText">以发送邮件至您的邮箱，请前往查看</h1>
    </div>
  </div>
</template>

<script>
import { bindEmail } from "@/api/accountSettings";
export default {
  name: "eMail",
  data() {
    return {
      showFlag: true,
      emailParams: {
        type: 0,
        email: "",
        key: ""
      }
    };
  },
  methods: {
    // 重置步骤
    resetPages() {
      console.log("重置步骤");
    },
    // 绑定/解绑邮箱
    _bindEmail() {
      if (this.emailParams.email == "") {
        this.$message.error("请输入您的邮箱");
      } else {
        bindEmail(this.emailParams).then(res => {
          if (res.code == 1) {
            this.showFlag = false;
          }
        });
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.eMail-wrap {
  text-align: center;
  .el-form {
    width: 45%;
    margin: 95px auto;
  }
  .el-button {
    width: 45%;
    height: 45px;
    color: #fff;
    background: #ff7f5b;
    margin-bottom: 60px;
  }
  .success-box {
    margin-top: 80px;

    .successImg {
      width: 100px;
      height: 125px;
    }
    .successText {
      font-size: 20px;
      color: #333;
    }
  }
}
</style>